<template>
  <div class="pages">
    <div class="total" v-if="total">{{ count }}条记录</div>
    <div class="prov" @click="prov" :class="{ disable: page == 1 }">上一页</div>
    <!-- 小于隐藏阈值 -->
    <div class="list" v-if="pageSize <= hide">
      <div
        class="item"
        @click="pageTo(i)"
        :class="{ active: page == i }"
        v-for="i in pageSize"
        :key="i"
      >
        {{ i }}
      </div>
    </div>
    <!-- 大于隐藏阈值  页码在开头 -->
    <div class="list" v-else-if="pageSize > hide && page <= show - 1">
      <div
        class="item"
        @click="pageTo(i)"
        :class="{ active: page == i }"
        v-for="i in 3"
        :key="i"
      >
        {{ i }}
      </div>
      <div class="omit">...</div>
      <div class="item" @click="pageTo(pageSize)">{{ pageSize }}</div>
    </div>
    <!-- 大于隐藏阈值  页码在结尾 -->
    <div class="list" v-else-if="pageSize > hide && page > pageSize - show + 1">
      <div class="item" @click="pageTo(1)">1</div>
      <div class="omit">...</div>
      <div
        class="item"
        @click="pageTo(pageSize - (show - i))"
        :class="{ active: page == pageSize - (show - i) }"
        v-for="i in show"
        :key="i"
      >
        {{ pageSize - (show - i) }}
      </div>
    </div>
    <!-- 需要隐藏 页码在中间 -->
    <div class="list" v-else>
      <div class="item" @click="pageTo(1)">1</div>
      <div class="omit">...</div>
      <div
        class="item"
        @click="pageTo(page - (show - i) + 1)"
        :class="{ active: page == page - (show - i) + 1 }"
        v-for="i in show"
        :key="i"
      >
        {{ page - (show - i) + 1 }}
      </div>
      <div class="omit">...</div>
      <div class="item" @click="pageTo(pageSize)">{{ pageSize }}</div>
    </div>

    <div class="next" @click="next" :class="{ disable: page == pageSize }">
      下一页
    </div>
    <div class="size" v-if="pages">{{ size }}/页</div>

    <div class="jump" v-if="jump">
      跳到 <input type="number" v-model="val" />页
      <button @click="pageTo(val)">确定</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Pages2",
  props: {
    // 是否显示总条数
    total: {
      type: Boolean,
      default: true,
    },
    // 是否显示自定义跳转
    jump: {
      type: Boolean,
      default: false,
    },
    // 是否显示总页数
    pages: {
      type: Boolean,
      default: true,
    },
    // 当前页码
    page: {
      type: Number,
      default: () => 1,
    },
    // 分页大小
    size: {
      type: Number,
      default: () => 15,
    },
    // 数据总条数
    count: {
      type: Number,
      default: () => 0,
    },
    // 超过多少页隐藏
    hide: {
      type: Number,
      default: () => 10,
    },
    // 隐藏显示几个
    show: {
      type: Number,
      default: () => 3,
    },
  },
  model: {
    prop: "page",
    event: "change",
  },
  data() {
    return {
      val: 1,
    };
  },
  watch: {
    page() {
      this.val = this.page;
    },
  },
  computed: {
    pageSize() {
      return Math.ceil(this.count / this.size) || 1;
    },
  },
  methods: {
    prov() {
      this.pageTo(this.page - 1);
    },
    next() {
      this.pageTo(this.page + 1);
    },
    pageTo(index) {
      index = parseInt(index);
      if (index >= 1 && index <= this.pageSize && index !== this.page) {
        this.$emit("change", index);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.pages {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #333;
  user-select: none;
  .total {
    margin-right: 15px;
  }
  .prov,
  .next {
    width: 60px;
    height: 32px;
    cursor: pointer;
    background: #ffffff;
    border-radius: 5px;
    border: 1px solid #e2e2e2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 5px;
    font-size: 12px;
    &.disable {
      opacity: 0.8;
    }
  }
  .list {
    .omit {
      margin: 0 5px;
    }
    display: flex;
    align-items: center;
    .item {
      font-size: 12px;
      margin: 0 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      background: #ffffff;
      border-radius: 2px;
      border: 1px solid #d4dbea;
      cursor: pointer;
      &.active {
        border: 1px solid #d4dbea;
        background: #f3f5f9;
      }
    }
  }
  .size {
    margin: 0 5px;
  }
  .jump {
    margin-left: 5px;
    input {
      width: 32px;
      height: 32px;
      background: #ffffff;
      border-radius: 2px;
      border: 1px solid #d4dbea;
      text-align: center;
      font-size: 12px;
      margin: 0 10px;
    }
    button {
      font-size: 12px;
      margin-left: 10px;
      width: 60px;
      height: 32px;
      background: #ffffff;
      border-radius: 2px;
      border: 1px solid #d4dbea;
      cursor: pointer;
    }
  }
}
</style>
